
<template>
	<view>
		<!-- 商品主图轮播 -->
		<image mode="widthFix" :src="moneyCover.cover"  style="width: 100%;"></image>
		<!-- 标题 价格 -->
		<view class="info-box goods-info">
			<view class="sumprice">
				<view class="price">
					{{moneyCover.price}}积分
				</view>
				<view class="logprice uni-product-price-favour" >库存{{moneyCover.stock}}</view>
			</view>
			<!--正标题 start-->
			<view class="title" style="font-weight: bold;">
				{{moneyCover.name}}
			</view>
			<!--正标题 end-->
			<!--副标题  strat-->
			<view style="color: #B2B2B2;letter-spacing:1px;">
				{{moneyCover.desc}}
			</view>
		</view>
		<!-- //商品描述html -->
		<view class="info-box content">
			<rich-text :nodes="moneyCover.content"></rich-text>
		</view>
		<!-- 底部菜单 -->
		<view>
			<view class="button" @click="getCover">
				{{moneyCover.price}}立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	import {getMoneyCoverById} from '../../common/api/money.js'
	export default {
		data() {
			return {
				moneyCover:null
			}
		},
		onLoad(opt) {
			getMoneyCoverById({id:opt.id}).then(res=>{
				console.log(res.data)
				this.moneyCover=res.data
			})
		},
		methods:{
			getCover(){
				if(this.moneyCover.stock>0){
					
				}else{
					uni.showModal({
						title:"提示",
						content:"库存不足"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
   .button{
   	
   	background-image: linear-gradient(-90deg, 
   	#3da180 0%, 
   	#62c980 100%), 
   	linear-gradient(
   	#e8ecef, 
   	#e8ecef);
   	background-blend-mode: normal, 
   	normal;
   	border-radius: 45px;
   	width: 80%;
	margin: auto;
	margin-bottom:20px ;
   	height: 45px;
	text-align: center;
   	line-height: 45px;
   	font-family: PingFangSC-Medium;
   	font-size: 14px;
   	letter-spacing: 0px;
   	color: #ffffff;
   }
   .status {
   	width: 100%;
   	height: 0;
   	position: fixed;
   	z-index: 10;
   	top: 0;
   	/*  #ifdef  APP-PLUS  */
   	height: var(--status-bar-height); //覆盖样式
   	/*  #endif  */
   	background-color: #f1f1f1;
   }
   
   .info-box {
   	width: 92%;
   	padding: 20upx 4%;
   	background-color: #fff;
   	
   }
   .goods-info {
   	font-family: PingFangSC-Medium;
   	.sumprice{
   		display: flex;
   		.price {
   			font-size: 25px;
   			color: rgba(86, 187, 128, 1);
   		}
   		.logprice{
   			font-family: PingFangSC-Regular;
   			font-size: 14px;
   			line-height: 50px;
   			color: rgba(0, 0, 0, 1);
   			opacity: 0.3;
   		}
   		.unit{
   			margin-top: 14.5px;
   			margin-left: 5px;
   			font-size: 12px;
   			color: rgba(86, 187, 128, 1);
   		}
   	}
   	.title {
   		font-size: 16px;
   		color: rgba(0, 0, 0, 1);
   	}
   }
   
</style>